<template>
	<view v-if="open" class="dialog">
		<view @click.stop class="dialog_content">
			<view class="dialog_head">
				详细信息
				<text class='close cuIcon-close' @click="close"></text>
			</view>
			<view class="dialog_detail">
				<view class="detail_head">
					<view class="detail_head_left">
						<!-- <image src="111" mode=""></image> -->
						<view class="detail_name">{{items.expressName}}</view>
						<view class="detail_orderNo">{{items.trackNo}}</view>
					</view>
					<view class="detail_head_right">
						<view class="text" @click="copy">复制</view>
					<!-- 	<view class="icon"></view>
						<view class="text" @click='handlePhone'>打电话</view> -->
					</view>
				</view>
				<view class="detail_list">
					<view class="detail_list_title">
						<view class="">当前状态</view>
						<view class="">{{items.signStatusStr}}</view>
					</view>
					<view  v-for="(item,index) in items.track[0].data" :key="index" class="list_item">
						<view class="item_time">
							<view class=""></view>
							<view class="">{{item.time}}</view>
						</view>
						<view class="item_address">
							{{item.context}}
						</view>
					</view>
				</view>
				<view class="aptitude" v-if='items.certificate'>
					<view class="aptitude_title">
						<view class="">资质</view>
					</view>
					<view class='aptitude-body'>
						<image class='pic' v-for='(pic,picIndex) in items.certificate.split(",")' :src='pic'
							@click='handleViewPic(items.certificate.split(","),picIndex)'></image>
					</view>
				</view>
				<view class="takeGood">
					<view class='icon'>收</view>
					<view class="text">
						{{order.linker}}，{{order.linkphone}}，{{order.province}}{{order.city}}{{order.region}}{{order.address}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			items:Object,
			order:Object,
		},
		watch: {
			order(newVal) {
				console.log(newVal)
			}
		},
		data() {
			return {
				open:false
			}
		},
		methods: {
			handleOpen(){
				this.open = true
			},
			close(){
				this.open = false
			},
			copy(){
				uni.setClipboardData({
					data: this.items.trackNo,
					success: (res) => {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			handleViewPic(pics,index) {
				uni.previewImage({
					current: index,
					urls: pics
				})
			},
 			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: ''
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, .5);

		.dialog_content {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			border-radius: 20rpx 20rpx 0px 0px;
			background: #F6F6F6;
			padding-bottom: 90rpx;

			.dialog_head {
				margin: 40rpx 0 30rpx;
				width: 100%;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 1;
				color: var(--h1Color);
				text-align: center;
				position: relative;

				.close {
					position: absolute;
					top: 50%;
					right: 40rpx;
					transform: translateY(-50%);
					font-size: 40rpx;
				}
			}

			.dialog_detail {
				width: 710rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				background: #FFFFFF;

				.detail_head {
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					height: 112rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #D8D8D8;
					.detail_head_left {
						
						display: flex;
						align-items: center;
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						.detail_name {
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 36rpx;
							color: var(--h1Color);
							margin-right: 20rpx;
						}

						.detail_orderNo {
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: normal;
							line-height: 36rpx;
							color: var(--h3Color);
						}
					}
					.detail_head_right{
						display: flex;
						align-items: center;
						.text{
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: normal;
							line-height: 36rpx;
							color: var(--h1Color);
						}
						.icon{
							width: 2rpx;
							height: 24rpx;
							background: #D8D8D8;
							margin: 0 16rpx;
						}
					}
				}
				.detail_list{
					width: 100%;
					padding: 20rpx 20rpx 26rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #D8D8D8;
					.detail_list_title{
						display: flex;
						align-items: center;
						margin-bottom: 18rpx;
						view{
							&:first-child{
								font-family: PingFang SC;
								font-size: 28rpx;
								font-weight: 500;
								line-height: 34rpx;
								color: var(--h1Color);
								margin-right: 16rpx;
							}
							&:last-child{
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 34rpx;
								color: var(--h1Color);
							}
						}
					}
					.list_item{
						width: 100%;
						padding-left: 18rpx;
						box-sizing: border-box;
						margin-bottom: 6rpx;
						.item_time{
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							view{
								&:first-child{
									width: 24rpx;
									height: 24rpx;
									border-radius: 50%;
									background: #D8D8D8;
									margin-right: 30rpx;
								}
								&:last-child{
									font-family: PingFang SC;
									font-size: 28rpx;
									font-weight: 500;
									line-height: 34rpx;
									color: var(--h1Color);
								}
							}
						}
						.item_address{
							margin-left: 12rpx;
							padding: 0 0 34rpx 41rpx;
							box-sizing: border-box;
							border-left: 1rpx solid #D8D8D8;
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: normal;
							line-height: 34rpx;
							color: var(--h3Color);
						}
					}
				}
				
				.aptitude {
					padding: 20rpx;
					border-bottom: 1rpx solid #D8D8D8;
					
					.aptitude-title {
						
					}
					
					.aptitude-body {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 20rpx;
						
						.pic {
							width: 100rpx;
							height: 100rpx;
							margin-right: 20rpx;
							border-radius: 8rpx;
						}
					}
				}
				
				.takeGood{
					width: 100%;
					padding: 20rpx 20rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.icon {
						width: 50rpx;
						height: 50rpx;
						border-radius: 25rpx;
						margin-right: 22rpx;
						background: var(--primaryGradBg);
						color: var(--btnColor);
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.text{
						flex: 1;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 34rpx;
						color: var(--h1Color);
					}
				}
			}
		}
	}
</style>